
.padContainer{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: white;
}

.headerContainer{
    position: absolute;
    z-index: 1000;
    height: 44px;
    width: 100vmax;

    //竖屏
    &.vertical{
        top: 0;
        left: 100%;
        transform-origin: 0 0;
        transform: rotate(90deg);
    }

    //横屏
    &.horizontal{
        top: 0;
        left: 0;
    }
}

.signatureBody{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(246,246,246,1);

    //竖屏
    &.vertical{
        left: 50px;
        right: 44px;

        .signHearText{
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }

    //横屏
    &.horizontal{
        top: 44px;
        bottom: 50px;
    }

    .signHearText{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        font-size:47px;
        font-weight:400;
        color:rgba(17,31,44,0.15);
        width:188px;
    }
}


.footerContainer{
    z-index: 1000;
    height: 50px;
    width: 100vmax;

    //竖屏
    &.vertical{
        position: absolute;
        top: 0;
        left: 50px;
        transform-origin: 0 0;
        transform: rotate(90deg);
    }

    //横屏
    &.horizontal{
        position: absolute;
        bottom: 0;
        left: 0;
    }
}


.contentCanvas{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.headerContainer{
    padding: 0 20px;
    display: flex;
    line-height: 44px;
    text-align: center;
    font-size:17px;
    color:rgba(25,31,37,1);
    box-shadow:inset 0px -1px 0px 0px rgba(17,31,44,0.12);

    // 左右两边
    .placeHolder{
        width: 60px;
    }

    .leftContainer{
        @extend .place-holder;
        display: flex;
        align-items: center;
        font-weight:400;

        .icon{
            font-size: 24px;
        }
    }

    .title{
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight:500;
    }
}

.footerContainer{
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.colorsContainer{
    display: flex;
    align-items: center;

    .colorItem{
        position: relative;
        margin-right: 24px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        color: white;

        text-align: center;

        // .icon{
        //     position: absolute;
        //     top: 50%;
        //     left: 0;
        //     font-size: 18px;
        // }
    }

    // .color-item-not-active{
    //     @extend .color-item;
    //     width: 24px;
    //     height: 24px;
    //     border-radius: 50%;
    // }
}

.btnsContainer{
    display: flex;
    align-items: center;

    .btn{
        width: 120px;
        height: 36px;
        margin-left: 16px;
    }
}
